Anartz Mugika Ledo🤗

Follow

--

Comenzamos con un nuevo artículo en el que os voy a mostrar a crear un sencillo juego con Angular y lo que vamos a crear es mítico juego “Piedra, papel o tijera” que conocemos muy bien y seguramente muchos/as de nosotros/as hemos jugado cuando estábamos en etapas escolares de primaria.

Si no recordáis cómo se jugaba, es muy sencillo. Tenemos 3 elementos, piedra papel o tijera y en cada jugada cada participante (normalmente es uno contra uno) saca uno de esos 3 elementos, con el objetivo de vencer a su contrincante.

Las combinaciones son las siguientes:

Si queréis más información del juego y otros temas relacionados, os invito a que os animéis a acceder a la información de Wikipedia del juego: https://es.wikipedia.org/wiki/Piedra,_papel_o_tijera

Sabiendo lo anterior, vamos a comenzar a trabajar en el juego y lo primero que vamos a tener en cuenta son los requisitos antes de empezar con ello.

Creamos el proyecto sin configuración de rutas y con la configuración de la hoja de estilos CSS.

Una vez que ya hemos creado el proyecto, descargamos las tres imágenes que necesitamos para las diferentes opciones del juego donde vamos a ejecutar nuestras jugadas con piedra, papel y tijera y las añadimos en el html del componente y le especificamos un tamaño de 100px de ancho.

Descargamos las imágenes desde aquí.

Aplicamos el siguiente código CSS en el app.component.css y el HTML en el app.component.html.

Una vez aplicado y guardado los cambios, tenemos que tener algo de este estilo:

Aplicando varios cambios en el style.css donde especificamos cómo estará lo que es el contenedor principal del body con su estilo, conseguiremos dejarlo sin márgenes, ni relleno para aplicarle un fondo de color personalizado

Quedará de la siguiente manera, donde queda evidente que tenemos que mejorar mucho el tema de las opciones de juego.

Añadiendo varios cambios en el apartado del app.component.css en relación a las opciones del juego.

Aplicando estos cambios en el app.component.css:

Quedará de la siguiente manera:

Como véis, es evidente que ha mejorado mucho la apariencia quedando muchísimo mejor.

Eso sí, cada uno/a de vosotros/as puede seleccionar los colores y estilos que queráis, esto es una propuesta personal que gustará o no.

En este caso vamos a aplicar los selectores hover y active en las opciones del juego. Aplicaremos lo siguiente:

Añadimos primero el HTML del código que os pongo a continuación junto con las reglas CSS concretas para estilizar esa parte:

Con ello, conseguiremos el siguiente resultado:

Ahora que ya tenemos el título y las opciones correctamente añadidas con sus estilos, vamos a terminar con el tema de la apariencia del juego añadiendo un marcador donde se irá contabilizando las puntuaciones “usuario-computadora”.

En este caso, para añadir el marcador, sin aplicar estilos, debemos de ir al fichero app.component.html y añadir lo siguiente:

Lo que se verá en nuestra aplicación, será algo como lo siguiente:

Comenzamos a darle un estilo bonito para darle más sentido a todo el trabajo que hemos realizado anteriormente con el título y las opciones del juego.

Añadimos en el fichero app.component.css lo siguiente:

Con esto que acabamos de añadir, la apariencia ha mejorado bastante y ¡ya queda poco para terminar con la parte gráfica!

Ahora, para terminar con la parte visual y centrarnos en la lógica del juego, añadiremos debajo de las opciones un mensaje “Selecciona tu jugada” y encima añadimos un apartado donde añadiremos el mensaje de la jugada realizada con la computador y el resultado.

Vamos a app.component.ts y creamos una propiedad “result” de tipo string, una que será un objeto donde se almacenará tanto la puntuación total del usuario y de la computadora. Inicializamos los valores:

Ahora que ya tenemos todo preparado en el componente, vamos a añadir esos valores en el template para que se refleje lo que tenemos en la lógica de nuestro componente:

Aplicamos los siguientes estilos en el app.component.css para que tome un buen aspecto:

Quedará de la siguiente manera:

En este caso vamos a definir la función que se encargará de realizar la selección de la opción de la jugada por parte de la computadora y esto lo realizaremos mediante una función aleatoria (random).

Creamos el servicio donde vamos a tener toda la lógica de nuestro juego.

ng g s game — skipTests

Se creará un fichero llamado “game.service.ts” donde introducimos la primera función que nos dará la jugada aleatoria de la computadora:

Ahora lo que vamos a definir es el resultado después de que el usuario haga su selección. Cuando se haga la selección por parte del usuario, se pondrá en marcha la función juego donde creamos un string que será una jugada que utilizaremos para determinar si el usuario ha ganado, ha perdido o ha empatado con la máquina.

Tenemos las siguientes combinaciones

Gana usuario:

Pierde usuario:

Empatan los jugadores:

Esto será traducido dentro del game.service.ts:

Ahora que ya hemos definido el resultado de la selección del jugador contra la computadora vamos a habilitar la opción para enviar lo que hemos elegido para realizar la jugada ya definida en el punto anterior.

Añadimos la función play dentro del app.component.ts con un parámetro de tipo string que será la selección del usuario y la añadimos en el componente.

El código será así:

Añadimos el código quedando así el template HTML:

Si hacemos click en las diferentes opciones, nos mostrará en este momento la selección del usuario

Inyectamos el servicio del juego (game.service.ts) en el constructor y cuando recibimos esa jugada, llamamos a la función “game” del servicio que hemos definido anteriormente enviando la selección del usuario.

El resultado cuando seleccionemos los usuarios nuestra jugada, combinando con la opción aleatoria que se obtiene desde la computadora:

Ahora llegados al punto donde ya hemos realizado la jugada obteniendo la combinación de la jugada completa con la opción de la computadora, tenemos que recibir 3 posibles respuestas, ganamos, perdemos y empatamos.

Modificamos la función “game” y añadimos para que guarde el mensaje del estado de la jugada, cuántos punto suma el usuario y cuantos la computadora, dependiendo de si gana, pierde o se empata.

Añadir en game.service.ts lo siguiente:

Recogemos el resultado y le asignamos los valores para que se reflejen los cambios en el template:

Después de ir haciendo todos los pasos, ¡el juego ya estará disponible en su versión más básica! Ahora lo que nos queda es disfrutar del juego y aplicarle mejoras, que espero que lo hagáis en el código que colgaré para contribuir y mejorar el juego.

Os dejo el repositorio para que aportéis vuestras contribuciones.

github.com